import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { NavBar, Toast } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import { BellOutline } from 'antd-mobile-icons'
import instance from '../../axios/instance'
import ystp from '../../img/ystp.png'
import { StarOutline, MessageOutline } from 'antd-mobile-icons'
import './eniterDetail.css'
import { Badge, TabBar } from 'antd-mobile'
import {
    AppOutline,
    MovieOutline,
} from 'antd-mobile-icons'

function Index() {
    const navigate = useNavigate()
    const tx = localStorage.getItem('headPic')
    const { id } = useParams()
    const [enData, setEnData] = useState({})

    //病友圈详情
    useEffect(() => {
        instance.get('/health/user/sickCircle/v1/findSickCircleInfo', {
            params: {
                sickCircleId: id
            }
        }).then(res => {
            console.log('resbyDetail', res)
            if (res.status === 200) {
                setEnData(res.data.result)
            }
        })
    }, [])

    // 新增时间转换函数，将时间戳转为 YYYY - MM - DD HH:mm:ss 格式
    const formatTime = (timestamp) => {
        const date = new Date(timestamp);
        const year = date.getFullYear();
        const month = (date.getMonth() + 1).toString().padStart(2, '0');
        const day = date.getDate().toString().padStart(2, '0');
        const hour = date.getHours().toString().padStart(2, '0');
        const minute = date.getMinutes().toString().padStart(2, '0');
        const second = date.getSeconds().toString().padStart(2, '0');
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
    };

    //头像
    const tp = 'https://images.unsplash.com/photo-1548532928-b34e3be62fc6?ixlib=rb-1.2.1&q=80&fm=jpg&crop=faces&fit=crop&h=200&w=200&ixid=eyJhcHBfaWQiOjE3Nzg0fQ'

    const { pathname } = location
    const tabs = [
        {
            key: "/home",
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: "/look",
            title: '视频',
            icon: <MovieOutline />,
        },
    ]


    return (
        <div>
            <NavBar onBack={() => navigate(-1)} style={{ height: "60px" }}
                left={<img src={tx} style={{ width: '40px', height: '40px', borderRadius: '50%' }} />}
                right={<BellOutline style={{ fontSize: '30px' }} />}
            >{enData.title}</NavBar>
            <div className='bzxx'>
                <div>
                    <p className='ys'>【病症】</p>
                    <p>{enData.disease}</p>
                </div>
                <div>
                    <p className='ys'>【科室】</p>
                    <p>{enData.department}</p>
                </div>
                <div>
                    <p className='ys'>【病症详情】</p>
                    <p>{enData.detail}</p>
                </div>
                <div>
                    <p className='ys'>【治疗经历】</p>
                    <div>
                        <p className='jl'>
                            <span>{enData.treatmentHospital}</span>
                            <span style={{ paddingRight: "20px" }}>{formatTime(enData.treatmentStartTime)}</span>
                        </p>
                        <p>{enData.treatmentProcess}</p>
                    </div>
                </div>
                <div>
                    <p className='ys'>【相关图片】</p>
                    {enData.picture === '' ? <img src={ystp} style={{ width: '300px', height: '200px' }} /> : enData.picture}
                </div>
                <div className='xqsc'>
                    <span style={{ marginRight: '20px' }}><StarOutline />{enData.collectionNum}</span>
                    <span><MessageOutline />{enData.commentNum}</span>
                </div>
            </div>
            <div style={{paddingBottom:"50px"}}>
                <p style={{ borderLeft: "5px solid skyblue" }}>被采纳的建议</p>
                <div className='jy'>
                    <span>
                        {enData.adoptHeadPic === '' ? <img src={tp}
                            style={{ width: "50px", height: '50px', borderRadius: '50%' }} /> : enData.adoptHeadPic}
                    </span>
                    <span style={{ marginLeft: '20px' }}>
                        {enData.adoptNickName === '' ? '猪小妹' : enData.adoptNickName}
                    </span>
                    <span>
                        {enData.adoptTime}
                    </span>
                </div>
                <p>{enData.adoptComment === '' ? '你好，开发独守空房教科局' : enData.adoptComment}</p>
            </div>
            <TabBar activeKey={pathname} onChange={key=>navigate(key)} className='tabb'>
                {tabs.map(item => (
                    <TabBar.Item key={item.key} icon={item.icon} title={item.title} />
                ))}
            </TabBar>
        </div>
    )
}

export default Index
